import cytoscape from "./edgehandles";

const getCy = options => {
    return cytoscape({
        container: options.container,

        layout: {
            // name: "concentric",
            // concentric: function(n) {
            //     return n.id() === "j" ? 200 : 0;
            // },
            // levelWidth: function(nodes) {
            //     return 100;
            // },
            // minNodeSpacing: 100
            name: 'preset',
            positions: node => node.position
        },

        maxZoom: 4,
        minZoom: 0.8,

        position: { 
            x: 0,
            y: 0
          },

        style: [
            {
                selector: "node[name]",
                style: {
                    content: "data(name)"
                }
            },
            {
                selector:'node',
                css:{
                    'height': 10,
                    'width': 10,
                    'background-fit': 'cover',
                    'border-color': '#000',
                    'border-width': 2,
                    'border-opacity': 0.5
                }
            },
            {
                selector: "edge",
                style: {
                    "curve-style": "bezier"
                    // "target-arrow-shape": "triangle"
                }
            },
            {
                selector: "nodeJerry1",
                css: {
                    'background-image': 'https://farm8.staticflickr.com/7272/7633179468_3e19e45a0c_b.jpg'
                }
            },

            // some style for the extension

            {
                selector: ".eh-handle",
                style: {
                    "background-color": "red",
                    width: 12,
                    height: 12,
                    shape: "ellipse",
                    "overlay-opacity": 0,
                    "border-width": 12, // makes the handle easier to hit
                    "border-opacity": 0
                }
            },

            {
                selector: ".eh-hover",
                style: {
                    "background-color": "red"
                }
            },

            {
                selector: ".eh-source",
                style: {
                    "border-width": 2,
                    "border-color": "red"
                }
            },

            {
                selector: ".eh-target",
                style: {
                    "border-width": 2,
                    "border-color": "red"
                }
            },

            {
                selector: ".eh-preview, .eh-ghost-edge",
                style: {
                    "background-color": "red",
                    "line-color": "red",
                    "target-arrow-color": "red",
                    "source-arrow-color": "red"
                }
            },

            {
                selector: ".eh-ghost-edge.eh-preview-active",
                style: {
                    opacity: 0
                }
            }
        ],

        elements: options.dataSrc
    });
};

export default getCy